<mat-sidenav-container class="script-container">
  <mat-sidenav #sidenav mode="over" position="end">
    <!-- <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon>close</mat-icon>
    </button> -->

    <apm-script-detail
      [eventDataSource]="eventDataSource"
      [devicesDataSource]="devicesDataSource"
    ></apm-script-detail>
  </mat-sidenav>

  <mat-sidenav-content>
    <stbui-search
      placeholder="输入资源名称"
      class="mat-elevation-z4 m-b-16"
    ></stbui-search>

    <div class="mat-elevation-z4">
      <div class="table-container">
        <table class="table-hover" mat-table [dataSource]="dataSource">
          <!-- <ng-container matColumnDef="select" sticky>
            <th mat-header-cell *matHeaderCellDef>
              <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()">
              </mat-checkbox>
            </th>
            <td mat-cell *matCellDef="let row">
              <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
              </mat-checkbox>
            </td>
          </ng-container> -->

          <ng-container matColumnDef="resource_url">
            <th mat-header-cell *matHeaderCellDef>错误资源</th>
            <td mat-cell *matCellDef="let element">
              {{ element.resource_url }}
            </td>
          </ng-container>

          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef>id</th>
            <td mat-cell *matCellDef="let element">{{ element._id }}</td>
          </ng-container>

          <ng-container matColumnDef="category">
            <th mat-header-cell *matHeaderCellDef>错误类型</th>
            <td mat-cell *matCellDef="let element">{{ element.category }}</td>
          </ng-container>

          <ng-container matColumnDef="fullurl">
            <th mat-header-cell *matHeaderCellDef>所属URL</th>
            <td mat-cell *matCellDef="let element">{{ element.fullurl }}</td>
          </ng-container>

          <ng-container matColumnDef="line">
            <th mat-header-cell *matHeaderCellDef>出错行号</th>
            <td mat-cell *matCellDef="let element">{{ element.line }}</td>
          </ng-container>

          <ng-container matColumnDef="col">
            <th mat-header-cell *matHeaderCellDef>出错列号</th>
            <td mat-cell *matCellDef="let element">{{ element.col }}</td>
          </ng-container>

          <ng-container matColumnDef="method">
            <th mat-header-cell *matHeaderCellDef>请求方式</th>
            <td mat-cell *matCellDef="let element">{{ element.method }}</td>
          </ng-container>

          <ng-container matColumnDef="msg">
            <th mat-header-cell *matHeaderCellDef>错误信息</th>
            <td mat-cell *matCellDef="let element">{{ element.msg }}</td>
          </ng-container>

          <ng-container matColumnDef="create_time">
            <th mat-header-cell *matHeaderCellDef>发生时间</th>
            <td mat-cell *matCellDef="let element">
              {{ element.create_time | date: 'yyyy-MM-dd hh:mm:ss' }}
            </td>
          </ng-container>

          <ng-container matColumnDef="star" stickyEnd>
            <th mat-header-cell *matHeaderCellDef>操作</th>
            <td mat-cell *matCellDef="let element">详情</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr
            mat-row
            *matRowDef="let row; columns: displayedColumns"
            (click)="onRowClicked(row, $event)"
          ></tr>
        </table>
      </div>
      <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
